<template>
    <view class="course-classify">
		
		<view v-if="modId!=0">
			<view class="list" style="margin-top: 24rpx;" v-if="curriculumModZList.length">
				<text v-for="cmZ in curriculumModZList" :key="cmZ.id" @click="goCurriculumList(cmZ)">{{cmZ.name}}</text>
			</view>	
			<view v-else class="no-list">
				<text>暂无课程</text>
			</view>
		</view>
		
    	<view class="cou-item" v-for="curriculumMod in curriculumModAll" :key="curriculumMod.id">
    		<view class="title">
    			<text>{{curriculumMod.name}}</text>
    		</view>
			<view class="list">
				<!-- <text>语文</text> -->
				<text v-for="cmZ in curriculumMod.cmZList" :key="cmZ.id" @click="goCurriculumList(cmZ, curriculumMod.name)">{{cmZ.name}}</text>
			</view>
    	</view>
    </view>
</template>
<script>
export default {
    data() {
        return {
			curriculumModAll:[],
			curriculumModZList: [],
			modId: '',
			cmName: ''
        }
    },
	onLoad(option){
		this.modId = option.modId
		this.cmName = option.name
		if(option.modId == 0){
			this.getCurriculumModAll();
		}else{
			this.getCurriculumModSon(option.modId);
		}
		
	},
	methods: {
		// 获取更多课程
		getCurriculumModAll(){
			this.api.get('happy/getCurriculumModAll').then(res=>{
				if(res.data.state!='ok') return
				this.curriculumModAll = res.data.cmList;
			})
		},
		// 获取对应课程分类的子类
		getCurriculumModSon(modId){
			this.api.post('happy/getCurriculumModSon', {
				curriculumModId: modId
			}).then(res=>{
				if(res.data.state!='ok') return
				this.curriculumModZList = res.data.cmZList;
			})
		},
		goCurriculumList(curriculumMod, cmName){
			uni.navigateTo({
				url: `/pages/recommend/course-list?modId=${curriculumMod.id}&modName=${cmName || this.cmName}-${curriculumMod.name}`
			})
		},
	}
}
</script>
<style lang="less" scoped>
	.course-classify{
		border-top: 1rpx solid #E5E5E5;
		overflow: hidden;
	}
	.cou-item{
		margin-bottom: 26rpx;
	}
	.title{
		font-size: 32rpx;
		line-height: 45rpx;
		padding: 24rpx;
		color: #262E3F;
		font-weight: bold;
	}
	.list{
		padding-left: 24rpx;
		text{
			display: inline-block;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			min-width: 218rpx;
			padding: 0 20rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: #F9F9F9;
			color: #333;
			font-size: 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			// &:nth-child(3n){
			// 	margin-right: 0;
			// }
		}
	}
	.no-list{
		// #ifdef H5
		height: calc(100vh - 44px - 1rpx);
		// #endif
		// #ifndef H5
		height: calc(100vh - 1rpx);
		// #endif
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>